import { useWebComponentStore } from '@/store//web/component'
import { useWebControlsStore } from '@/store/web/controls'
import { defineStore, acceptHMRUpdate } from 'pinia'
import { PAGE_TYPE, COMMON_WID_HEI } from '@/const'
import { PAGE_TYPE_ } from '@/const/web/'
import { isHasOwnProperty, guid } from '@/utils'
import { searchComponentDataById } from '@/store/utils/'
import { addLoadJsLib, loadJsLib, resetLoadJsObj } from '@/store/utils/web/'
import { useWebSiteStore } from './site'
import { copyGroupComponentControls, addComponentData } from '@/store/utils/web/'
import { ADD_COMP_ATTR } from '@/store/models/component-default-data'

export function getPageById(id: string) {
  const useWebSite = useWebSiteStore()
  let len = useWebSite.pages.length
  for (let i = 0; i < len; i++) {
    let page: IPage = useWebSite.pages[i]
    if (page && page.id == id) {
      return page
    }
  }
  return useWebSite.pages[0]
}

export const useWebPageStore = defineStore('webPage', {
  state: (): IWebPageStore => {
    return {
      currentPage: null,
      componentFrontAttr: {},
      pageIndex: -1,
      popIndex: -1,
    }
  },
  getters: {
    isSite(): boolean {
      const useWebSite = useWebSiteStore()
      if (this.currentPage && (this.currentPage.type == PAGE_TYPE_.pop || useWebSite.siteStatus.isCurrentPage)) {
        return false
      } else {
        return true
      }
    },
  },
  actions: {
    setCurrentPageOrPopIndex(pageIndex: number, popIndex: number) {
      this.pageIndex = -1
      this.popIndex = -1
      if(pageIndex >= 0) {
        this.pageIndex = pageIndex
      }
      if(popIndex >= 0) {
        this.popIndex = popIndex
      }
    },
    setActivePage(page?: IPage) {
      const useWebSite = useWebSiteStore()
      if (this.currentPage) {
        this.currentPage.isActive = false
        _.forEach(this.currentPage.components, (componentData: IComponent) => {
          componentData.active = false
        })
      }
      if (!page) {
        this.currentPage = null
        return
      }
      _.forEach(useWebSite.pages, (page: IPage) => {
        page.isActive = false
      })
      _.forEach(page.components, (componentData: IComponent) => {
        componentData.active = false
      })
      //记录坐标
      let top = 100
      let left = 20
      let zIndex = 0
      if (page && page.components.length > 0) {
        top = page.components[0].conAttr.top
        left = page.components[0].conAttr.left
        zIndex = page.components[0].conAttr.zIndex + 1
      }
      useWebSite.position.top = top
      useWebSite.position.left = left
      useWebSite.siteStatus.zIndex = zIndex

      this.currentPage = page;
      this.currentPage.isActive = true
    },
    updatePageAttrs(attrs: IPageAttrs | any) {
      _.merge(this.currentPage, attrs)
    },
    movePageIndex({ type, pageIndex }) {
      const useWebSite = useWebSiteStore()
      const pages = useWebSite.getH5Pages
      const pops = useWebSite.getPopPages
      if (type == PAGE_TYPE.single) {
        const page = pages[pageIndex - 1]
        _.pullAt(pages, pageIndex - 1)
        pages.splice(pageIndex, 0, page)
      } else {
        const pop = pops[pageIndex - 1]
        _.pullAt(pops, pageIndex - 1)
        pops.splice(pageIndex, 0, pop)
      }
      useWebSite.pages = pages.concat(pops)
    },
    copyPage(id: string) {
      const page = _.cloneDeep(getPageById(id))
      page.id = guid()
      const useWebControls = useWebControlsStore()
      const useWebSite = useWebSiteStore()
      let compId: string = ''
      let copyId: string = ''
      _.forEach(page.components, (componentData: IComponent) => {
        copyId = componentData.id
        compId = guid()
        componentData.id = compId
        useWebSite.componentMap[componentData.id] = componentData
        useWebControls.addEventControlToControls({ copyId, compId })
        if(componentData.components && componentData.components.length > 0) {
          copyGroupComponentControls(componentData)
        }
      })
      const pageIndex = useWebSite.pages.findIndex(page => page.id == id)
      this.copyPage_({ page, pageIndex })
      const useWebComponent = useWebComponentStore()
      useWebComponent.setActiveComponentId()
      this.setActivePage(page)
    },
    copyPage_({ page, pageIndex }: { page: IPage, pageIndex: number }) {
      const useWebSite = useWebSiteStore()
      for (let j = 0, len = page.components.length; j < len; j++) {
        const componentData = page.components[j]
        if (!isHasOwnProperty(this.componentFrontAttr, componentData.id)) {
          this.componentFrontAttr[componentData.id] = { isHidden: false, isLock: false }
        }
      }
      useWebSite.pages.splice(pageIndex, 0, page)
    },
    addComponent(componentData: IComponent) {
      resetLoadJsObj()
      addLoadJsLib(componentData)
      loadJsLib()
      let hei = 0
      const useWebComponent = useWebComponentStore()
      const useWebSite = useWebSiteStore()
      if(useWebComponent.currentComponentData) {
        hei = useWebComponent.currentComponentData.conAttr.height
      }
      componentData.id = guid()
      useWebSite.componentMap[componentData.id] = componentData
      const addCompAttr = _.cloneDeep(ADD_COMP_ATTR)
      delete addCompAttr.conStyles
      _.merge(componentData, addCompAttr)
      _.merge(componentData.conAttr, { left: useWebSite.position.left, top: useWebSite.position.top! + hei })
      const top = this.currentPage!.attrs.height - componentData.conAttr.height
      if(componentData.conAttr.top > top){
        componentData.conAttr.top = top
      } else if (componentData.conAttr.top > COMMON_WID_HEI.height){
        componentData.conAttr.top = COMMON_WID_HEI.height - componentData.conAttr.height
      }
      const left = this.currentPage!.attrs.width - componentData.conAttr.width
      if(componentData.conAttr.left > left) {
        componentData.conAttr.left = left
      }
      if(componentData.conAttr.left < 0) {
        componentData.conAttr.left = 0
      }else if(componentData.conAttr.left > COMMON_WID_HEI.width) {
        componentData.conAttr.left = COMMON_WID_HEI.width - componentData.conAttr.width
      }
      addComponentData(componentData)
    },
    addComponent_(componentData: IComponent) {
      this.currentPage!.components.push(componentData)
      if (!isHasOwnProperty(this.componentFrontAttr, componentData.id)) {
        this.componentFrontAttr[componentData.id] = { isHidden: false, isLock: false }
      }
    },
    removeComponentById(id: string) {
      const componentData = searchComponentDataById(id, this.currentPage!);
      let index = _.indexOf(this.currentPage!.components, componentData);
      if (index != -1) {
        this.currentPage!.components.splice(index, 1);
      }
    },
    setComponentFrontAttr({id, attr}) {
      if(!isHasOwnProperty(this.componentFrontAttr, id)) {
        this.componentFrontAttr[id] = { isHidden: false, isLock: false }
      }
      _.merge(this.componentFrontAttr[id], attr)
    },
  },
})

if (import.meta.hot) {
  import.meta.hot!.accept(acceptHMRUpdate(useWebPageStore, import.meta.hot))
}